<template>
    <div>
        <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff"
            active-text-color="#fff">
            <el-submenu index="2" class="submenu">
                <template slot="title">超级管理员</template>
                <el-menu-item @click="handleOut()" index="2-3">退出登陆</el-menu-item>
            </el-submenu>
            <el-menu-item index="1" class="submenu" @click="goGoods">个人中心</el-menu-item>
            <el-menu-item index="1" class="submenu" @click="goIndex">首页</el-menu-item>
        </el-menu>
        <div class="head">
            <el-input prefix-icon="el-icon-search" style="width:30%;margin-left:35%" v-model="input"
                placeholder="请输入书籍名称" @change="search"></el-input>
        </div>
        <div class="head-item">
            <div class="head_item_div" v-for="(item, index) in options" :key="index">
                <span class="title">{{ item.value }}</span>
                <span class="title_item" v-for="(it) in item.data">{{ it.value }}</span>
            </div>
        </div>
        <div class="content">
            <div v-for="(item, index) in contOptions" :key="index" class="conItem">
                <div class="conItem_item" @click="details(item)">
                    <img :src="item.img" class="image">
                    <div style="padding: 14px;">
                        <span>{{ item.title }}</span>
                        <div class="bottom clearfix">
                            <time class="time">{{ currentDate }}</time>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>

export default {
        
    data() {
        return {
            options: [
                {
                    "key": "1",
                    "value": "分类",
                    "data": [
                        {
                            "code": "1",
                            "value": "分类1"
                        },
                        {
                            "code": "2",
                            "value": "分类2"
                        }
                    ]
                },
                {
                    "key": "2",
                    "value": "作者",
                    "data": [
                        {
                            "code": "1",
                            "value": "作者1"
                        },
                        {
                            "code": "2",
                            "value": "作者2"
                        }
                    ]
                },
                {
                    "key": "3",
                    "value": "出版社",
                    "data": [
                        {
                            "code": "1",
                            "value": "出版社1"
                        },
                        {
                            "code": "2",
                            "value": "出版社2"
                        }
                    ]
                }
            ],
            contOptions: [
                {
                    img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                    title: '1111',
                },
                {
                    img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                    title: '22222',
                },
                {
                    img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                    title: '33333',
                },
                {
                    img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                    title: '44444',
                },
                {
                    img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                    title: '55555',
                },
                {
                    img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                    title: '66666',
                },
                {
                    img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                    title: '77777',
                },
            ],
            currentDate: new Date(),
            fullscreenLoading: false,
            input: '',
            
        }
    },
    methods: {
        // 退出登陆
        handleOut() {
            this.fullscreenLoading = true;
            setTimeout(() => {
                this.fullscreenLoading = false;
                this.$store.commit('logout', 'false')
                this.$router.push({ path: '/login' })
                this.$message({
                    type: 'success',
                    message: '已退出登录!'
                })
            }, 2000);
        },
        // 搜索
        search() {
            console.log(this.input, 'eee')
        },
        // 跳详情
        details(row) {
            this.$router.push({
                path: '/details',
                query: {
                    row
                },
            })
        },
        // 去首页
        goIndex() {
            this.$router.push({
                path: '/shopping',
                query: {
                    // url的参数, 类似get请求的传参

                },
            })
        },
        // 去后台
        goGoods() {
            this.$router.push({
                path: '/goods/Goods',
                query: {},
            })
        }
    }
}
</script>

<style scoped>
.head {
    width: 100%;
    height: 100px;
    margin: auto;
    line-height: 100px;
}

.head-item {
    width: 90%;
    margin: 0 5%;
}

.head_item_div {
    border-bottom: 1px solid #ccc;
}

.title,
.title_item {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 100px;
    cursor: pointer;
}

.title {
    background: rgb(255, 238, 241);
}

.content {
    width: 100%;
}

.conItem {
    float: left;
    width: 23%;
    margin: 1%;
}

.conItem_item {
    width: 80%;
    background: #eeeded;
    margin-left: 10%;
    padding: 10px;
    cursor: pointer;
}

.image {
    width: 100%;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.button {
    margin: 10px;
    float: right;
}

.breadcrumb {
    margin: 10px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
}

.submenu {
    float: right;
}

.buttonimg {
    height: 60px;
    background-color: transparent;
    border: none;
}

.showimg {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 17px;
    left: 17px;
}

.showimg:active {
    border: none;
}
</style>